<template>
	<!--	产品-->
	<view
		v-if="itemData && itemData.type == WaterfallTypes.PRODUCT"
		class="type-card type-product"
		@click.stop="goToProductDetail(itemData)"
	>
		<view class="title-wrap">
			<image :src="imgBaseUrl + 'baokuan-title.png'" class="title-img" />
		</view>
		<view class="product-wrap flex-col">
			<view class="cover-img" :style="{ 'background-image': 'url(' + itemData.cover_url + ')' }" />
			<view class="product-content flex-col space-between">
				<view>
					<view class="product-title text-ellipsis fs-28 font-500">{{ itemData.name }}</view>
					<view class="text-ellipsis c-grey-86 mt-4">{{ itemData.intro }}</view>
				</view>
				<view class="product-bottom flex-a space-between">
					<view class="flex-a-baseline c-red">
						<text class="font-500">￥</text>
						<text class="font-oppo font-900 fs-32">{{ priceInCent(itemData.lowest_price_in_cent) }}</text>
						<text class="c-black-c9 pl-6 line-through">
							&yen;{{ priceInCent(itemData.lowest_price_in_cent) }}
						</text>
					</view>
					<view class="buy-btn">抢购</view>
				</view>
			</view>
		</view>
	</view>
	<!--	景区20-->
	<view
		v-if="itemData && itemData.type == WaterfallTypes.SCENIC"
		class="type-card type-scenic"
		@click.stop="pageToScenicDetail(itemData.type_data.jump_target_id)"
	>
		<view :style="{ 'background-image': 'url(' + itemData.cover_url + ')' }" class="scenic-img" />
		<view class="scenic-content">
			<view class="fs-28 font-500 text-ellipsis">{{ itemData.name }}</view>
			<view class="flex-a pt-8">
				<view class="score-wrap flex-a">
					<image :src="imgBaseUrl + 'icon-star.png'" class="icon-star" />
					<text class="font-900 c-red pl-4">{{ priceInCent(itemData.score_in_cent, 1) }}</text>
				</view>
				<view class="tag-wrap ml-8 text-ellipsis" v-if="itemData.resort_hot_list_id > 0">
					{{ itemData.resort_hot_list_name }}·第{{ itemData.resort_hot_list_ranking }}名
				</view>
			</view>
			<view class="mt-16" v-if="itemData.labels">
				<zjy-labels :data="itemData.labels" />
			</view>
			<view class="flex-a-baseline mt-16 c-red">
				<text class="font-500">&yen;</text>
				<text class="font-900 font-oppo fs-32 pl-4">{{ priceInCent(itemData.lowest_price_in_cent) }}</text>
				<text class="pl-4">起</text>
			</view>
		</view>
	</view>
	<!--	文章40-->
	<view v-if="itemData && itemData.type == WaterfallTypes.ARTICLE" class="type-card type-article">
		<view :style="{ 'background-image': 'url(' + itemData.cover_url + ')' }" class="article-img" />
		<view class="article-content">
			<view class="article-title text-2-ellipsis">{{ itemData.name }}</view>
			<view class="article-bottom flex-a space-between">
				<view class="flex-a">
					<image :src="itemData.author_avatar" class="icon-32 circle" />
					<view class="text-ellipsis fs-22 ml-8" style="max-width: 176rpx">
						{{ itemData.author_name }}
					</view>
				</view>
				<view class="flex-a">
					<image
						class="icon-like"
						:src="imgBaseUrl + (itemData.like ? 'icon-like-fill.png' : 'icon-like.png')"
					/>
					<view class="fs-24 ml-8">{{ itemData.like_count }}</view>
				</view>
			</view>
		</view>
	</view>

	<!--	活动专题+广告 30+50-->
	<view
		v-if="itemData && [WaterfallTypes.ACTIVE_PAGE, WaterfallTypes.AD].includes(itemData.type)"
		class="type-card type-ad"
		:style="{ 'background-image': 'url(' + itemData.cover_url + ')' }"
	/>
	<!--	口碑榜60-->
	<view
		v-if="itemData && itemData.type == WaterfallTypes.RANKING"
		class="type-card type-rank"
		@click.stop="goToRank(itemData)"
	>
		<view class="rank-title fs-24 flex-a space-between">
			<view class="rank-title-img" :class="['img-' + itemData.hot_list_type]"></view>
			<view>
				全部
				<image :src="imgBaseUrl + 'icon-right-brown.png'" class="icon-16" />
			</view>
		</view>
		<view class="rank-content bg-white radius-16">
			<view class="rank-item flex" v-for="(hotItem, index) in itemData.hot_list_items.slice(0, 3)" :key="index">
				<view class="cover-img" :style="{ 'background-image': 'url(' + hotItem.cover_url + ')' }">
					<view class="cover-top cover-top-{{index+1}}"></view>
				</view>
				<view class="flex-1 pl-8">
					<view class="text-ellipsis fs-28 font-500">{{ hotItem.name }}</view>
					<view class="fs-20 c-grey-86 text-ellipsis pt-6">
						{{ hotItem.reason }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
import { ProductTypes, WaterfallTypes } from "@/constants/common"
import { priceInCent, subString } from "@/mixins/mixins"
import ZjyLabels from "@/components/zjy-labels.vue"
import {
	navigateTo,
	pageToCombotktDetail,
	pageToTripDetail,
	pageToScenicDetail,
	pageToTicketDetail,
} from "@/utils/page-redirect"
const imgBaseUrl = inject("imgBaseUrl")

const props = defineProps({
	itemData: {
		type: Object,
		default: () => ({}),
	},
})

// 产品跳转
const goToProductDetail = (item: any) => {
	if (item.type_data.jump_product_type === ProductTypes.TICKET) {
		pageToTicketDetail(item.type_data.jump_target_id)
	} else if (item.type_data.jump_product_type === ProductTypes.COMBO_TKT) {
		pageToCombotktDetail(item.type_data.jump_target_id)
	} else if (item.type_data.jump_product_type === ProductTypes.TRIP) {
		pageToTripDetail(item.type_data.jump_target_id)
	} else {
		uni.showToast({ title: "暂不支持该跳转类型" + item.type_data.jump_product_type, icon: "none" })
	}
}

// 口碑榜跳转
const goToRank = (item: any) => {
	navigateTo(`/pages/feed/rank/index`, { id: item.type_data.jump_target_id })
}

onMounted(() => {
	// console.log(props.itemData)
})
</script>
<style lang="scss" scoped>
.type-card {
	border-radius: 16rpx;
	overflow: hidden;
	position: relative;
}
.type-rank {
	display: flex;
	flex-direction: column;
	background: url($imgBaseUrl + "koubei-bg.png") no-repeat center center;
	background-size: cover;
	//height: 450rpx;
	width: 100%;
	.rank-title {
		padding: 24rpx 16rpx;
		height: 82rpx;
		color: $brown-7c;
		.rank-title-img {
			width: 176rpx;
			height: 36rpx;
			&.img-10 {
				background: url($imgBaseUrl + "rank-jingqu.png") no-repeat center center;
				background-size: cover;
			}
			&.img-20 {
				background: url($imgBaseUrl + "rank-xianlu.png") no-repeat center center;
				background-size: cover;
			}
			&.img-30 {
				background: url($imgBaseUrl + "rank-jiudian.png") no-repeat center center;
				background-size: cover;
			}
		}
	}
	.rank-content {
		background: $c-white;
		display: flex;
		flex-direction: column;
		height: 100%;
		margin: 8rpx;
		padding: 24rpx 12rpx;
		.rank-item {
			margin-bottom: 24rpx;
			&:last-child {
				margin-bottom: 0;
			}
		}
		.cover-img {
			width: 88rpx;
			height: 88rpx;
			border-radius: 12rpx;
			position: relative;
			background-position: center center;
			background-size: cover;
			.cover-top {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 32rpx;
				height: 36rpx;
			}
			.cover-top-1 {
				background: url($imgBaseUrl + "top-1.png") no-repeat center center;
				background-size: cover;
			}
			.cover-top-2 {
				background: url($imgBaseUrl + "top-2.png") no-repeat center center;
				background-size: cover;
			}
			.cover-top-3 {
				background: url($imgBaseUrl + "top-3.png") no-repeat center center;
				background-size: cover;
			}
		}
	}
}
.type-scenic {
	.scenic-img {
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		height: 342rpx;
		background-position: center center;
		background-size: cover;
	}
	.scenic-content {
		padding: 16rpx 20rpx;
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
		.score-wrap {
			border-radius: 8rpx;
			padding: 6rpx 8rpx;
			background: rgba(245, 63, 63, 0.1);
			.icon-star {
				width: 24rpx;
				height: 28rpx;
			}
		}
		.tag-wrap {
			border-radius: 8rpx;
			color: $brown-7c;
			padding: 6rpx 8rpx;
			background: rgba(255, 180, 0, 0.1);
		}
	}
}
.type-article {
	.article-img {
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		width: 100%;
		height: 456rpx;
		background-position: center center;
		background-size: cover;
	}
	.article-content {
		padding: 16rpx 20rpx;
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;

		.article-title {
			font-size: 28rpx;
			color: $c-black-1d;
		}
		.article-bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 20rpx;
			font-size: 22rpx;
			color: $c-grey-86;
			.icon-like {
				width: 26rpx;
				height: 24rpx;
			}
		}
	}
}
.type-product {
	background: url($imgBaseUrl + "baokuan-bg.png") no-repeat center center;
	background-size: cover;
	height: 444rpx;
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 8rpx;
	.title-wrap {
		height: 84rpx;
		padding: 24rpx 20rpx 24rpx 12rpx;
		.title-img {
			width: 280rpx;
			height: 44rpx;
		}
	}
	.product-wrap {
		flex: 1;
		border-radius: 16rpx;
		background: $c-white;
		.cover-img {
			width: 100%;
			height: 186rpx;
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
			background-position: center center;
			background-size: cover;
		}
		.product-content {
			flex: 1;
			padding: 16rpx 12rpx 12rpx;
			.product-bottom {
				.buy-btn {
					background: $red;
					color: $c-white;
					padding: 6rpx 36rpx;
					border-radius: 64rpx;
				}
			}
		}
	}
}
.type-ad {
	width: 100%;
	height: 458rpx;
	background-size: cover;
	background-position: center center;
}
.font-900 {
	font-weight: 900;
}
.line-through {
	text-decoration: line-through;
}
</style>
